	
<!--all the HTML with the 3 canvases and the GIF -->
<section>
<div id="canvasesdiv" style="position:relative; height:300px; width:800px;">
<canvas id="layer1"style="z-index: 1;position:absolute;top:0px;left:200px;" height="500px" width="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2"style="z-index: 2;position:absolute;top:0px;left:200px;" height="500px" width="500"
onmouseover="handleMouseOver(event)" onmousemove="handleMouseMove(event)"onmouseout="handleMouseOut(event)"onclick="handleMouseClick(event)">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer3"style="z-index: 0;position:absolute;top:0px;left:200px;" height="500px" width="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<img src="<?php echo base_url();?>resources/juggernaut.gif"  width="160" height="240" />


<script type="text/javascript">
    //stuff for the canvases
    var layer1;
    var layer2;
    var layer3;
    var ctx1;
    var ctx2;
    var ctx3;
    //stuff for the ball
    var playing = 0;
    var dx = 0;
    var dy = 0;
    var ballx = 250;
    var bally = 250;
    //size of space
    var WIDTH = 500;
    var HEIGHT = 500;
    var BOT_OFFSET = 10;
    //stuff for the paddle
    var paddlex = 0;
    var PADDLE_HEIGHT = 15;
    var PADDLE_WIDTH = 50;
    //Stuff for bricks
    var NROWS = 5;
    var NCOLS = 5;
    var BRICK_WIDTH = (WIDTH/NCOLS) - 1;
    var BRICK_HEIGHT = 15;
    var PADDING = 1;
    var NUM_BLOCKS = 0;
    
    var paused = false;
    var paused_dx = 0;
    var paused_dy = 0;

//set rightDown or leftDown if the right or left keys are down
document.onkeydown = function(event) {
  var keyCode;
  
  if(event == null)
  {
    keyCode = window.event.keyCode; 
  }
  else 
  {
    keyCode = event.keyCode; 
  }
  
  if (keyCode == 80 && paused == false)
  {
      showEvent("paused");
      paused = true;
      paused_dx = dx;
      paused_dy = dy;
      dx = 0;
      dy = 0;
  }
  else if (keyCode == 80 && paused == true)
  {
    showEvent("");
    paused = false;
    dx = paused_dx;
    dy = paused_dy;
  }
}


//$(document).keydown(onKeyDown);

    //set up the layers
    function init() {
        //get layer 1
        layer1 = document.getElementById("layer1");
        ctx1 = layer1.getContext("2d");
        //get layer 2
        layer2 = document.getElementById("layer2");
        ctx2 = layer2.getContext("2d");
        //get layer 3
        layer3 = document.getElementById("layer3");
        ctx3 = layer3.getContext("2d");
        
        //draw2();
        ctx2.fillStyle = "#FFFFFF";
        showEvent("Click To Start");        //The redraw timeout
        setInterval(drawAll, 20);
    }
    
    //build the bricks
    function initbricks() {
        bricks = new Array(NROWS);
        for (i=0; i < NROWS; i++) {
          bricks[i] = new Array(NCOLS);
          for (j=0; j < NCOLS; j++) {
            bricks[i][j] = 1;
          }
        }
        NUM_BLOCKS = NROWS * NCOLS;
    }
    //the redraw function
    function drawAll() {
        
        draw1();
        draw3();
        
    }
    function checkcollisions()
    {
        //have we hit a brick?
        rowheight = BRICK_HEIGHT + PADDING;
        colwidth = BRICK_WIDTH + PADDING;
        row = Math.floor(bally/rowheight);
        col = Math.floor(ballx/colwidth);
        //if so, reverse the ball and mark the brick as broken
        if (bally < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
          dy = -dy;
          bricks[row][col] = 0;
          NUM_BLOCKS -= 1;
        }
        //check left right walls
        if (ballx + (2 * dx) > WIDTH - 5 || ballx + (2 * dx) < 5)
            dx = -dx;
        //check roof    
        if (bally + dy < 0)
            dy = -dy;
        //check paddle    
        if ((bally + dy >= HEIGHT-PADDLE_HEIGHT-BOT_OFFSET) && (ballx + dx > paddlex && ballx + dx < paddlex + PADDLE_WIDTH))
        {
            dy = -dy;
            //if the ball in on the left quarter make it move more left
            if(ballx + dx  < (paddlex + PADDLE_WIDTH * .25 ))
            {
                showEvent("LEFT");
                dx -= 2;
            }
            //if the ball is on the right quarter make it move more right
            if(ballx + dx  > (paddlex + (PADDLE_WIDTH * .75 )))
            {
                showEvent("RIGHT");
                dx += 2; 
            }
            //dx = dx + (dx * 2 * ((ballx-(paddlex+PADDLE_WIDTH/2))/PADDLE_WIDTH))

        }
    }

    function draw1() {
        //refresh the canvas
        ctx1.clearRect(0, 0, WIDTH, HEIGHT);
        ctx1.beginPath();
        ctx1.rect(0,0,WIDTH,HEIGHT);
        ctx1.closePath();
        ctx1.beginPath();
        //draw the ball
        ctx1.fillStyle = "#FF0000";
        ctx1.arc(ballx, bally, 10, 0, Math.PI*2, true);
          //draw bricks
        ctx1.fillStyle = "#00FFFF";
        for (i=0; i < NROWS; i++) {
          for (j=0; j < NCOLS; j++) {
            if (bricks[i][j] == 1) {
              ctx1.fillStyle = "#00FFFF";
              ctx1.fillRect((j * (BRICK_WIDTH + PADDING)) + PADDING, 
                   (i * (BRICK_HEIGHT + PADDING)) + PADDING, BRICK_WIDTH, BRICK_HEIGHT);
            }
          }
        }
        checkcollisions();
        //GAME OVER
        if((bally + dy > HEIGHT -BOT_OFFSET ) || NUM_BLOCKS == 0 )   
        {
            dy = 0;
            dx = 0;
            showEvent("Game Over Click to play again")
            ballx = 250;
            bally = 250;
            playing = 0;
        }   
        //change ball speed     
        ballx += dx;
        bally += dy;
        //draw paddle
        ctx1.fillStyle = "#FF0000";
        ctx1.fillRect(paddlex, HEIGHT-PADDLE_HEIGHT-BOT_OFFSET, PADDLE_WIDTH, PADDLE_HEIGHT);
        ctx1.closePath();
        ctx1.fill();
    }


    //This is just for kicks to draw the text messages 
    function draw2() {
    ctx2.fillStyle    = '#FFFFFF';
        /*

        // The font property is like the CSS font property.
        ctx2.font         = 'italic 30px sans-serif';
        ctx2.textBaseline = 'top';

        if (ctx2.fillText) {
            ctx2.shadowOffsetX = 5;
            ctx2.shadowOffsetY = 5;
            ctx2.shadowBlur    = 4;
            ctx2.shadowColor   = 'rgba(50, 10, 10, .5)';

            //ctx2.fillText('What up bro!', 200, 0);
            //ctx2.fillText('A Juggernaut just for u!', 200, 50);
        }
        */
        
    }
    //draws the background image
    function draw3() {
        var img = new Image();
        img.onload = function(){
            ctx3.drawImage(img,0,0,500,500);     
        };
        img.src = '<?php echo base_url();?>resources/cityscape2.jpg';
        
    }

    //function to display string 
    //called on mouse actions
    function showEvent(str) {
        ctx2.clearRect(0,0,layer1.width,layer2.height);
        ctx2.font="20pt Calibri";
        ctx2.textAlign="center";
        ctx2.fillText(str, 250, 250);
        draw2();

    }
    //mouse movement
    function handleMouseMove(evt) {
        if (evt.layerX || evt.layerX == 0) { // Firefox
            paddlex = evt.layerX;
        } else if (evt.offsetX || evt.offsetX == 0) { // Opera
            paddlex = (evt.offsetX);
        }
      //max WIDTH - PADDLE_WIDTH
      if(paddlex > WIDTH - PADDLE_WIDTH)
        paddlex = WIDTH-PADDLE_WIDTH;
    }
    //mouse leave the canvas
    function handleMouseOut(evt) {
        //showEvent("Now go fix the code");
    }
    //mouse in the canvas
    function handleMouseOver(evt) {
    //if(playing == 0){
      //  ctx2.fillStyle = "#FFFFFF";
        //showEvent("Click To Start");
       // }         
    }
    //mouse click in the canvas
    function handleMouseClick(evt) {
        //showEvent("You want to play brickbreaker huh?");
        if(playing == 0){
            initbricks();
            playing = 1;
            dx = 0;
            dy = 4;
            showEvent("");
            
        }
    }
    //start up section
    init();
    initbricks();
</script>
</section>

